<template>
  <div class="template-management-container">
    <div class="page-header">
      <div class="header-left">
        <h1>模板管理</h1>
        <el-breadcrumb separator-icon="ArrowRight">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path: '/system' }">系统设置</el-breadcrumb-item>
          <el-breadcrumb-item>模板管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-button type="primary" @click="handleAddTemplate">
        <el-icon><Plus /></el-icon>
        添加模板
      </el-button>
    </div>
    
    <el-card>
      <div class="search-container">
        <el-input
          v-model="searchKeyword"
          placeholder="搜索模板名称或描述"
          prefix-icon="Search"
          style="width: 300px;"
        />
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      
      <el-table :data="templates" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="模板名称" width="200" />
        <el-table-column prop="description" label="描述" />
        <el-table-column prop="type" label="模板类型" width="120">
          <template #default="scope">
            <el-tag :type="getTemplateTypeColor(scope.row.type)">
              {{ scope.row.type }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'danger'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="180" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="primary" link @click="handleEditTemplate(scope.row)">编辑</el-button>
            <el-button type="danger" link @click="handleDeleteTemplate(scope.row.id)">
              {{ scope.row.status === 'active' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalTemplates"
          prev-text="上一页"
          next-text="下一页"
          page-sizes-text="条/页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Plus } from '@element-plus/icons-vue';

// 模拟模板数据
interface Template {
  id: number;
  name: string;
  description: string;
  type: string;
  status: 'active' | 'inactive';
  created_at: string;
}

const searchKeyword = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const totalTemplates = ref(30);
const templates = ref<Template[]>([]);

// 根据模板类型返回对应的标签颜色
const getTemplateTypeColor = (type: string): string => {
  const colorMap: Record<string, string> = {
    'API测试': 'primary',
    'UI测试': 'success',
    '性能测试': 'warning',
    '安全测试': 'danger',
    '集成测试': 'info'
  };
  return colorMap[type] || 'default';
};

// 加载模拟模板数据
const loadTemplates = () => {
  // 模拟API请求延迟
  setTimeout(() => {
    const startIndex = (currentPage.value - 1) * pageSize.value;
    const mockTemplates: Template[] = [];
    const types = ['API测试', 'UI测试', '性能测试', '安全测试', '集成测试'];
    
    for (let i = 1; i <= pageSize.value && startIndex + i <= totalTemplates.value; i++) {
      const id = startIndex + i;
      const type = types[id % types.length];
      mockTemplates.push({
        id,
        name: `${type}模板${id}`,
        description: `这是一个${type}的测试用例模板，用于快速生成相关测试用例。`,
        type,
        status: id % 4 === 0 ? 'inactive' : 'active',
        created_at: new Date(Date.now() - Math.random() * 30 * 24 * 60 * 60 * 1000).toLocaleDateString('zh-CN')
      });
    }
    
    templates.value = mockTemplates;
  }, 300);
};

// 生命周期钩子
onMounted(() => {
  loadTemplates();
});

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1;
  loadTemplates();
};

// 处理分页变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  loadTemplates();
};

// 处理当前页变化
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  loadTemplates();
};

// 添加模板
const handleAddTemplate = () => {
  // 这里可以添加打开添加模板对话框的逻辑
  console.log('添加模板');
};

// 编辑模板
const handleEditTemplate = (template: Template) => {
  // 这里可以添加打开编辑模板对话框的逻辑
  console.log('编辑模板', template);
};

// 删除/禁用模板
const handleDeleteTemplate = (templateId: number) => {
  // 这里可以添加确认对话框和删除逻辑
  console.log('删除/禁用模板', templateId);
};
</script>

<style scoped>
.template-management-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-left h1 {
  font-size: 20px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 8px;
}

.search-container {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .search-container {
    justify-content: center;
  }
  
  .search-container .el-input {
    width: 100% !important;
    max-width: 300px;
  }
  
  .pagination-container {
    justify-content: center;
  }
}
</style>